<template>
  <div class="control-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="监控点：" prop="name">
        <el-input v-model="form.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="点播类型：" prop="storeDeviceType">
        <el-radio-group v-model="form.storeDeviceType" size="mini">
          <el-radio label="0">中心存储</el-radio>
          <el-radio label="57">设备存储</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="开始时间：" prop="beginTime">
        <el-date-picker
          type="date"
          @focus="addInframe"
          size="mini"
          placeholder="选择日期"
          v-model="form.beginTime"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间：" prop="endTime">
        <el-date-picker
          type="date"
          @focus="addInframe"
          size="mini"
          placeholder="选择日期"
          v-model="form.endTime"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Form } from "element-ui";
interface form {
  [key: string]: string;
}
@Component
export default class extends Vue {
  //表单内容
  form: form = {
    storeDeviceType: "",
    beginTime: "",
    endTime: "",
    indexCode: "",
    stationId: "",
    name: "",
    id: "",
  };
  //   验证内容
  rules: object = {
    name: [{ required: true, message: "请选择监控点", trigger: "blur" }],
    storeDeviceType: [
      { required: true, message: "请选择点播类型", trigger: "blur" },
    ],
    beginTime: [{ validator: this.ruleDateTime, trigger: "blur" }],
    endTime: [{ validator: this.ruleDateTime, trigger: "blur" }],
  };
  //   开始时间结束时间判断
  ruleDateTime(rule: object, value: string, callback: any): void {
    let starttime = this.form.beginTime;
    let endtime = this.form.endTime;
    if (!starttime) {
      callback(new Error("请选择开始时间"));
    }
    if (!endtime) {
      callback(new Error("请选择结束时间"));
    }
    if (starttime && endtime) {
      if (new Date(starttime).getTime() > new Date(endtime).getTime()) {
        callback(new Error("开始时间不得大于结束时间"));
      } else {
        callback();
      }
    } else {
      callback();
    }
  }
  $refs!: {
    form: Form;
  };
  //   提交查询
  onSubmit(): void {
    this.$refs.form.validate((valid) => {
      if (valid) {
        this.$emit("setView", this.form);
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }
  addInframe() {
    // let el-picker-panel el-date-picker el-popper
    window.setTimeout(() => {
      let pickerArr = document.querySelectorAll(".el-date-picker");
      pickerArr.forEach((item) => {
        let width = item.clientWidth;
        let height = item.clientHeight;
        let iframe: any = item.querySelector("iframe");
        if (!iframe) {
          iframe = document.createElement("iframe");
          item.appendChild(iframe);
        }
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
        iframe.style.position = "absolute";
        iframe.style.top = "0px";
        iframe.style.left = "0px";
        iframe.style.zIndex = 1;
        iframe.style.zIndex = 1;
        iframe.style.pointerEvents = "none";
      });
    }, 100);
  }
}
</script>

<style lang="scss">
.control-container {
  .el-form-item {
    margin-bottom: 16px;
  }
}
</style>
<style lang="scss" scoped>
.control-container {
  width: 100%;
  height: 100%;
}
</style>

